Ext.define('NF.view.farm.LactationDetails', {
    extend:'Ext.grid.Panel',
    alias:'widget.lactationDetails',
    frame:true,
    activatedAtleastOnce:false,
    autoScroll:true,
    selType: 'rowmodel',

    initComponent:function(){
        var self=this;
        this.plugins = [
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit: 1
            })
        ],
        this.columns= [
            {header: 'ID',  dataIndex: 'id'},
            {header: 'Date Of Lactation', dataIndex: 'dateOfLactation', flex:1,
                editor: {xtype:'datefield',format: 'F j, Y',allowBlank:false},
                renderer: function(dateOfLactation){
                    return Ext.util.Format.date(dateOfLactation,'F j, Y')
                }
            },
            {header: 'Time Of Lactation', dataIndex: 'timeOfLactation', flex:1,
                editor:{xtype:'timefield',format: 'h:i:s A',allowBlank:false},
                renderer: function(timeOfLactation){
                    return Ext.util.Format.date(timeOfLactation,'h:i:s A')
                }
            },
            {header: 'Fat Percentage', dataIndex: 'fatPercentage', flex:1,
                field:{
                    xtype:'numberfield',
                    allowBlank:false
                }
            },
            {header: 'Quantity', dataIndex: 'quantity', flex:1},
            {header: 'Rate Per Quantity', dataIndex: 'ratePerQuantity', flex:1,
                field:{
                    xtype:'numberfield',
                    allowBlank:false
                }
            }
        ],
        this.store = Ext.create('Ext.data.Store',{
            model:'NF.model.LactationDetails',
            autoLoad:false,
            pageSize:5,
            autoSync:false,
            proxy:{
               type:'ajax',
                url:'lactation/lactationDetails.json',
                reader:{
                    type:'json',
                    root:'lactationDetails',
                    totalProperty:'total'
                }
            },
            listeners:{
                update:self.handleUpdate
            }
        });
        this.dockedItems = [
            {
                xtype: 'pagingtoolbar',
                store: self.store,
                dock: 'top',
                displayInfo: true,
                items:[
                    {
                        xtype:'button',
                        iconCls: 'icon-add',
                        text: 'Add Lactation',
                        listeners:{
                            click:self.addNewRecord,
                            context:self.context,
                            selfer:self
                        }
                    }
                ]
            }
        ],//dockedItems
        this.callParent(arguments);
        this.setTitle("Lactation Details");
        self.activatedAtleastOnce=true;
        self.prepareGrid();
    },
    handleUpdate:function(thisStore, updatedRecord, operation, options){
        Ext.Ajax.request({
            url: 'lactation/updateLactationDetails.json',
            params: updatedRecord.data,
            success: function(response){
                var text = response.responseText;
                thisStore.load();
            }
        });
    },
    prepareGrid:function(){
        var self=this;
        var lactationStore = self.getStore();
        lactationStore.getProxy().extraParams.id = self.context.id;
        lactationStore.load();
    },
    addNewRecord:function(thisButton,eventObject,contextObject){
        var self=this;
        var lactationWindow  = Ext.create('Ext.window.Window',{
            title: 'Add Lactation',
            autoHeight: true,
            width: 400,
            layout: 'fit',
            modal:true,
            listeners:{
                close:function(){
                    contextObject.selfer.prepareGrid();
                }
            }
        });
        lactationWindow.add(contextObject.selfer.createLactationForm());
        lactationWindow.show();
    },
    createLactationForm:function(){
        var self=this;
        var lactationForm = Ext.create('Ext.form.Panel', {
            title: 'Lactation Form',
            url:'lactation/updateLactationDetails.json',
            bodyPadding: 10,
            items: [
                {
                    xtype: 'datefield',
                    fieldLabel: 'Date of Lactation',
                    name: 'dateOfLactation',
                    format: "c",
                    allowBlank:false,
                    value:new Date()
                },
                {
                    xtype: 'timefield',
                    fieldLabel: 'Time of Lactation',
                    name: 'timeOfLactation',
                    format: "c",
                    allowBlank:false,
                    value:new Date()
                },
                {
                    xtype: 'numberfield',
                    fieldLabel: 'Fat Percentage',
                    name: 'fatPercentage',
                    allowBlank:false
                },
                {
                    xtype: 'numberfield',
                    fieldLabel: 'Quantity',
                    name: 'quantity',
                    allowBlank:false
                },
                {
                    xtype: 'numberfield',
                    fieldLabel: 'Rate Per Quantity',
                    name: 'ratePerQuantity',
                    allowBlank:false
                },
                {
                    xtype: 'hiddenfield',
                    name: 'livestockId',
                    value:self.context.id,
                    allowBlank:false
                }
            ],
            buttons: [
                {
                    text: 'Submit',
                    handler: function() {
                        var self=this;
                        var form = this.up('form').getForm(); // get the basic form
                        if (form.isValid()) { // make sure the form contains valid data before submitting
                             form.submit({
                                success: function(form, action) {
                                   self.up('window').close();
                                },
                                failure: function(form, action) {
                                    Ext.Msg.alert('Failed', action.result.msg);
                                }
                             });
                        } else { // display error alert if the data is invalid
                            Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
                        }
                    }
                }
            ] //buttons closed.
        });
        return lactationForm;
    }
});